<template>
    <div class="main_view">
        <div class="view_groupList">
            <div class="view_groupList-box">
                <ul>
                    <li class="group-item scale-1px-bottom" v-for="(item,index) in groupList" :key="index" @click="addTitle(item,index)"> 
                        <span>{{item.title}}</span>
                        <i v-if="item.active" class="iconfont icon-loupan_gouxuan"></i>
                    </li>
                </ul>
            </div> 
        </div>
        <div class="view_addGroup" @click="addGroup">
            <img src="../../assets/img/custom/add2x(5).png" alt="" class="view_addImg">
            <span>新增分组</span>
        </div> 
        <div class="view_dialog" v-if="addShow">
            <div class="dialog_add">
                <div class="dialog_headeradd scale-1px-bottom">
                    <div class="first">添加分组</div>
                    <div class="second">请输入分组名称</div>
                    <div class="inputDiv">
                        <div class="inpt border">
                            <input type="text" 
                            v-model="inputText" 
                            id="myText" 
                            class="input"  
                            placeholder="最多6个汉字" 
                            style="font-size:14px;"
                            @blur="blur"
                            ref="addinput"> 
                        </div>
                    </div>
                </div>
                <div class="dialog_footer">
                    <div @click="edit">取消</div>
                    <div @click="submit" class="sunmit">确定</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import CustomService from 'SERVICE/customService'
import { mapGetters } from 'vuex'
export default {
    name:"changeGroups",
    data () {
        return {
            groupList:[
                {name: '沟通过的客户1'},
                {name: '沟通过的客户2'},
                {name: '沟通过的客户3'},
            ],//分组列表
            addShow:false,//添加分类弹框显示隐藏
            inputText:"",
            clientId:"",
            classifyId:'',//分组id
        }
    },
    created() {
        this.getGroupList();
        this.clientId = this.$route.query.clientId;
        this.classifyId = this.$route.query.classifyId;
    },
    methods:{
        //失去焦点
        blur() {
            setTimeout(() => {
                const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0
                window.scrollTo(0, Math.max(scrollHeight - 1, 0))
            }, 100)
        },
        // 添加分组显示弹框
        addGroup () {
            this.addShow = true;
        },
        // 取消添加分组
        edit () {
            this.addShow = false;
            this.inputText = '';
        },
        // 添加分组确定
        submit () {
            if (this.inputText.replace(/[^\x00-\xff]/g, 'xx').length < 13 ) {
                let reg = /^[\u4E00-\u9FA5A-Za-z0-9]+$/g 
                if (this.inputText == '留电客户') { 
                    this.$toast({
                        duration: 1000,
                        message: '不能与默认分组名称相同！'
                    })
                }else
                if (reg.test(this.inputText)) {
                    CustomService.addClassify({agentId: this.userInfo.agentId,title: this.inputText}).then((result) => { 
                        this.addShow = false;
                        this.inputText = '';
                        this.$toast({
                            type: 'success',
                            duration: 1000,
                            message: '添加分组成功'
                        })
                        this.getGroupList(true);
                    }).catch((err) => {
                        console.log(err)
                    })
                } else if(this.inputText == ''){
                    this.$toast({
                        duration: 1000,
                        message: '不能为空！'
                    })
                } else {
                    this.$toast({
                        duration: 1000,
                        message: '不能输入特殊字符！'
                    })
                }
            }else {
                this.$toast({
                    duration: 1000,
                    message: '最多6个汉字(或12个字符)！'
                })
            }
        },
        //获取分组列表
        getGroupList (isCache = false) {
            CustomService.getClassifyList({agentId :this.userInfo.agentId, 
            }).then((result) => {
                if (isCache) {
                    sessionStorage.removeItem("listInfo")
                    // this.setCacheData(result)
                }
                this.groupList = this.setActive(result)
            }).catch((err) => {
                console.log(err)
            })
        },
        // 设置当前点击
        setActive(dataList) {
            return dataList.map(item => {
                if (item.classifyId == this.classifyId) {
                    item.active = true
                } else {
                    item.active = false
                }
                return item
            })
        },
        addTitle (e,index) {
            // this.$router.push(`/custom/${this.clientId}`);
            // let oldObj = this.groupList.find(item => item.active) || {}
            this.classifyId = e.classifyId;
            this.updateCustomerInfo({classifyId : this.classifyId,clientId: this.clientId })
        },
        /**
        * 更新信息和缓存信息
        */
        // setCacheData(array) {
        //     let zipData = sessionStorage.getItem("listInfo")
        //         if (zipData) {
        //             let cacheData = JSON.parse(zipData)
        //             if (cacheData) {
        //                 let classArray = cacheData.classData.splice(0,4)
        //                 cacheData.classData = [...classArray, ...array]
        //             }
        //         let changeData = JSON.stringify(cacheData)
        //         sessionStorage.setItem("listInfo", changeData)
        //     }
        // },
        async updateCustomerInfo (params) {
            try {
                await CustomService.updateCustomerInfo(params)
                this.groupList = this.setActive(this.groupList)
                this.$toast({
                    type: 'success',
                    duration: 1000,
                    message: '设置成功'
                })
                sessionStorage.removeItem("listInfo")
                // this.groupList.forEach(item => {
                //     if (item.active) {
                //         item.clientNum += 1
                //     }
                //     if (oldClassifyId && item.classifyId === oldClassifyId) {
                //         item.clientNum -= 1
                //     }
                // })
                // this.setCacheData(this.groupList, params.clientId)
                setTimeout(() => {
                    this.$router.go(-1);
                }, 300)
            } catch (error) {
                console.log(console.error)
            }
        }
    },
    computed: {
    ...mapGetters(['userInfo']),
    }
}
</script>


<style lang="less" scoped>
input::-webkit-input-placeholder{ 
        line-height: normal;  
        font-size: 14px; 
}
input::-ms-input-placeholder{
        line-height: normal;   
        font-size: 14px; 
}
</style>
<style lang="less" scoped>
.main_view { 
    background-color: #F7F9FA;
    .view_groupList {
        background-color: #fff;
        .view_groupList-box {
            padding: 0 16px;
            ul {
                list-style: none;
                li {
                    width: 100%;
                    height: 52px;  
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    span { 
                        font-size:16px;
                        font-family:PingFangSC;
                        font-weight:400;
                        color:rgba(19,40,77,1); 
                    }
                    i {
                        font-size: 20px;
                        color: #007AE6;
                    }
                }
            }
        } 
    }
    .view_addGroup {
        background-color: #fff;
        height: 52px;
        width: 100%;
        margin-top: 10px; 
        font-size:16px;
        font-family:PingFangSC;
        font-weight:400;
        color:#13284D; 
        display: flex;
        align-items: center;
        padding-left: 16px; 
        .view_addImg {
            width: 22px;
            height: 22px;
        }
        span {
            margin-left: 8px;
        }

    }
    .view_dialog {
        position:absolute;
        height: 100vh;
        top: 0;
        z-index: 22;
        background: rgba(0, 0, 0, .5);
        width:100%;
        display: flex; 
        justify-content: center;
        align-items: center;
        .dialog_add {
            width: 280px;
            height: 190px;
            border-radius: 12px;
            background: #ffffff;  
            .dialog_headeradd { 
                text-align: center; 
                .inputDiv {
                    box-shadow: none;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-top: 12px;
                    .inpt {
                        width: 216px;
                        height: 32px;
                        border-radius: 0px !important;
                        display: flex;
                        align-items: center; 
                        position: relative;
                        margin-bottom: 15px;
                        .input {
                            width: 90%;
                            margin: 0 5px;
                            border: none;
                        }
                    }
                }
                .first { 
                    font-size:18px;
                    font-family:PingFangSC-Medium;
                    font-weight:500;
                    color:rgba(51,51,51,1);
                    line-height:26px;  
                    margin-top: 27px;
                }
                .second { 
                    font-size:15px;
                    font-family:PingFangSC-Regular;
                    font-weight:400;
                    color:rgba(51,51,51,1);
                    line-height:23px;
                    margin-top: 5px; 
                }
            }
            .dialog_footer {
                display: flex;
                div {
                    width: 50%;
                    text-align: center; 
                    line-height: 49px;
                    font-size: 18px;
                    font-weight: 500; 
                }
                div:nth-child(1) {
                    color: #007AE6;  
                } 
                div:nth-child(2) {
                    color: #007AE6;
                }
                .sunmit {
                    position: relative;
                    border:none;
                }
                .sunmit:after {
                    content: '';
                    position: absolute; 
                    top: 0;
                    left: 0;
                    background: #eee;
                    opacity: 0.3;
                    width: 1px;
                    height: 200%;
                    -webkit-transform: scaleY(0.5);
                    transform: scaleY(0.5);
                    -webkit-transform-origin: 0 0;
                    transform-origin: 0 0;
                }
            }
        }
    }
    .border{
        box-shadow: inset 0px 0 1px 0 #ccc;
    }
}
</style>
